<template>
  <el-select v-model="nodeID" :placeholder="$t('configLazyLoad.channel.noPush')" @change="optionChange">
    <el-option
      v-for="item in welcomeOptions"
      :label="item.name"
      :value="item._id">
    </el-option>
  </el-select>
</template>
<script>
  import { deepClone } from '@utils/m7Utils.js'
  export default {
    data () {
      return {
        nodeID: ''
      }
    },
    methods: {
      optionChange (value) {
        this.nodeID = value
        let data = null
        let arr = this.index.split('_')
        if (arr.length && this.index.length) {
          data = {
            value: value,
            index: this.index
          }
        } else {
          data = value
        }
        this.$emit('changeOption', data)
      }
    },
    props: {
      welcomeNodeId: {
        type: String,
        default: ''
      },
      index: {
        type: String,
        default: ''
      }
    },
    watch: {
      welcomeNodeId (cur) {
        this.nodeID = cur
      }
    },
    computed: {
      welcomeOptions () {
        let Option = deepClone(this.$store.state.config.channelConfig.webchatSchdule.welcomeNode)
        let OptionNew = [{ name: this.$t('configLazyLoad.channel.noPush'), _id: '' }, ...Option]
        return OptionNew
      }
    },
    beforeMount () {
      let flag = false
      this.nodeID = this.welcomeNodeId
      this.welcomeOptions.forEach((item) => {
        if (item._id === this.welcomeNodeId) {
          flag = true
        }
      })
      if (!flag) {
        this.nodeID = ''
        let data = null
        if (this.index > -1) {
          data = {
            value: '',
            index: this.index
          }
        } else {
          data = ''
        }
        this.$emit('changeOption', data)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
</style>
